<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../common/testdata.js"></script>
		<style>
			#areaA, #areaB {
				margin: 50px 10px;
				width:300px;
				height:330px;
				float: left;
			}
            .content{
                margin: 20px auto;
                width: 80%;
            }
            .field{
                text-align: center;
                padding: 2px 0;
            }
            .field input{
                width: 200px;
            }

		</style>
		<title>Binding to a native HTML form</title>
	</head>
	<body>

		<div id="areaA"></div>
		<div id="areaB">
            <div class="content">
                <div class="field">
                    <input type="number" name="rank" />
                </div>
                <div class="field">
                    <input type="text" name="title" value="" placeholder="Book title" />
                </div>
                <div class="field">
                    <input type="number" name="year" value="" placeholder="Year" />
                </div>
                <div class="field">
                    <input type="button" name="submit" value="Submit" onclick='$$("formView").save()'/>
                </div>
            </div>

		</div>

		<script type="text/javascript" charset="utf-8">
			webix.ui({
				container: "areaB",
				id: "formView",
				view:"htmlform",
				content: "areaB",
				rules:{
					title: webix.rules.isNotEmpty,
					year: webix.rules.isNumber,
					rank: webix.rules.isNumber
				}

			});

			webix.ui({
				container:"areaA",
				id: "list1",
				view:"list", 

				template:"#rank#. #title# <div style='padding-left:18px'> Year:#year#, votes:#votes# </div>",
				type:{
					height:50
				},
				select:true,

				data:big_film_set
			});


			$$('formView').bind($$('list1'));
            $$("list1").select(2);

		</script>
	</body>
</html>